<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内置对象扩展</title>
</head>

<style>
    .test {
        color: red;
    }
</style>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
</body>
<script>
    // 1、模板字符串
    let className = 'test';
    let str = 'Hello';
    let html = `
           <div class="${className}">${str}</div>
       `;
    console.log(html);

    // 2、 数组的扩展,Array.from() 转换数组
    let lis = document.querySelectorAll('li');
    console.log(lis);
    console.log(Array.isArray(lis));
    console.log(Array.from(lis));
    console.log(Array.of(["1", "2", "33"]));

    // 3、 对象的补充
    // key 和 value 是一样的，写一个就行了
    let name = '张三';
    let age = 12;
    let obj = {
        name, age
    };
    console.log(obj);

    // Object.assign() 合并对象属性
    let obj1 = {name: '张安'};
    let obj2 = {age: 12};
    let obj3 = {address: '北京'};
    let obj4 = {};
    Object.assign(obj4, obj1, obj2, obj3);
    console.log(obj4);

    // 4、延展扩展符，用来把字符串，对象转成数组 ...
    let str1 = '今天是一个好天气';
    let array = [...str1];
    console.log(array);

    // 数组去重的应用
    let arrys = [1, 2, 3, 4, 5, 1, 2, 3];
    console.log(new Set(arrys));
    console.log([...new Set(arrys)]);

    // 5. 参数的扩展
    // es5 中设置默认值
    function sum(num1, num2) {
        // 若为空，设置默认值
        num1 = num1 || 10;
        num2 = num2 || 10;
        console.log(num1 + num2);
    }

    sum();
    sum(10, 23);

    function sum1(num1 = 10, num2 = 10) {
        // 若为空，设置默认值
        console.log(num1 + num2);
    }

    sum1();
    sum1(10, 23);

    // 6. 可变参数
    function f1(name, sex, ...nums) {
        console.log(name);
        console.log(sex);
        for (let num of nums) {
            console.log(num + "aq");
        }
    }

    f1("1", 2, 12, 2, 12);

</script>
</html>